<template>
	<view class="collpane-list">
		<!-- v-slot="{open}" -->
		<collpanel @toggle="toggle($event,item,parent)" :key="index" v-for="item,index in list" :title="item[showTitle]" >
			<!-- :style="open?'border-bottom: 1px solid #eaeaea;':''" -->
			<view @tap="toInfo(items)" v-for="(items,indexs) in item.article_list" :key="indexs" class="names" >
				<view class="names_top">
					<view>{{items.title}}</view>
					<!-- <view class="flex ali-c" @tap.stop="is_edit(index,indexs)">
						<image class="edit_img" src="/sta1tic/zupu/editor.png"></image>
						<view class="edit_title">编辑</view>
					</view> -->
					<view class="flex ali-c" @tap.stop="to_edit(item,items)">
						<image class="edit_img" :src="photo_cdn1+'zpupload/static/zupu/editzp.png'"></image>
						<view class="edit_title">编辑</view>
					</view>
				</view>
			</view>
			<view @tap="addition(item)" class="add_article">
				
				<view class="add_btn">
					<image class="add_img" :src="photo_cdn1+'zpupload/static/zupu/addcle.png'"></image>
					<text>添加谱文</text>
				</view>
			</view>
			<!-- <uv-collapsePane-list  :parent="[...parent,item]" :children="children" :showName="showName" :showTitle="showTitle" :list="item[children]" v-if="item[children] && item[children].length>0"></uv-collapsePane-list> -->  
		</collpanel>
		
		<uni-popup ref="wen_popup" type="center" :mask-click="true" :animation="true">
			<view class="category_card">
				<view class="card_title">请选择操作</view>
				<view class="category_btn">
					<view class="celect_btn" @tap="cancel">删除</view>
					<view class="celect_btn" @tap="confirm">编辑内容</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import {delArticle} from "@/utils/api/zupu.js"
import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
export default {
	name:'collpanelist',
	props:{
		list: {
			type: Array,
			default () {
				return []
			},
		},
		parent: {
			type: Array,
			default () {
				return []
			},
		},
		showTitle: {
			type: String,
			default: 'title',
		},
		showName: {
			type: String,
			default: 'label',
		},
		children: {//需要识别的code标识
			type: String,
			default: 'children',
		},
		family_id: {
			type: Number,
			default: 0,
		},
	},
	data() {
	  return {
		  photo_cdn1,
		  article_id:'',//谱文id
		  pitch_title:'',//谱文类目
	  };
	},
	created(){
		
	},
	methods: {
		// toggle(e,item,parent,num){
		// 	this.$emit('toggle',e,item,parent)
		// },
		
		//添加谱文
		addition(item){
			uni.navigateTo({
				url:`/pages/zupu/puwen/create_puwen/create_puwen?family_id=${this.family_id}&pitch_title=${item.title}&column_id=${item.id}&source=1`
			})
		},
		//查看谱文详情
		toInfo(items){
			console.log(typeof(items.id),'items')
			uni.navigateTo({
				url:`/pages/zupu/puwen/wen_info/wen_info?article_id=${items.id}`
			})
		},
		is_edit(index,indexs){
			this.$emit("is_edit",{index:index,indexs:indexs})
		},
		to_edit(item,items){
			this.$refs.wen_popup.open();
			this.article_id = items.id;
			this.pitch_title = item.title;
		},
		//点击编辑
		confirm(){
			uni.navigateTo({
				url:`/pages/zupu/puwen/create_puwen/create_puwen?article_id=${this.article_id}&pitch_title=${this.pitch_title}&source=2&family_id=${this.family_id}`
			})
			this.$refs.wen_popup.close();
		},
		//点击删除
		cancel(){
			this.$refs.wen_popup.close();
			this.$showModal({
				title:'提示',
				concent:`您是否要删除“${this.pitch_title}”？`,
				confirmVal:'确定',
				cancelVal:'取消',
			}).then(ress=>{
				delArticle({
					article_id:this.article_id
				}).then(res=>{
					if(res.code==1){
						this.$api.msg(res.msg)
					}				
					this.deleteComplete(this.article_id);
				})
			}).catch(err=>{
				console.log(err)
			})
			
		},
		//本地删除
		deleteComplete(delid){
			for (var i in this.list) {
				for (var j in this.list[i].article_list) {
					if (this.list[i].article_list[j].id == delid) {
						this.list[i].article_list.splice(Number(j), 1);
						return
					}
				}
			}
		}
	}
	  
};
</script>

<style scoped lang="scss">
.names{
	padding: 25rpx 20rpx;
	background-color: #FFFFFF;
	.names_top{
		font-size: 34rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.add_article{
	width: 100%;
	padding: 25rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	.add_btn{
		box-sizing: border-box;
		padding: 10rpx 25rpx;
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		text-align: center;
		font-size: 30rpx;
		background-color: #F6F6F6;
	}
	.add_img{
		margin-right: 12rpx;
		width: 30rpx;
		height: 30rpx;
	}
}
.edit_img{
	width: 40rpx;
	height: 40rpx;
}
.edit_title{
	font-size: 28rpx;
	margin: 0 10rpx;
}
.items_bottom{
	background-color: #FFF6ED;
	padding: 15rpx 10rpx;
	margin-top: 10rpx;
	position: relative;
}
.items_bottom::before{
	content: '';
	height: 0;
	width: 0;
	border-color: transparent transparent #FFF6ED transparent;
	border-style: solid;
	border-width: 0rpx 30rpx 40rpx 30rpx;
	position: absolute;
	top: -16rpx;
	right: 10rpx;	
}
.category_card{
	width: 600rpx;
	margin: 0 auto;
	padding: 30rpx 20rpx;
	background-color: #FFFFFF;
	.card_title{
		font-size: 30rpx;
		text-align: center;
	}
	.category_btn{
		display: flex;
		margin-top: 40rpx;
		justify-content: space-evenly;
		.celect_btn{
			min-width: 140rpx;
			border-radius: 70rpx;
			text-align: center;
			padding: 15rpx 0;
			background-color: $themecolor;
			color: #FFFFFF;
			font-size: 26rpx;
		}
	}
}
</style>